<template>
  <div>
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.go(-1)" />
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      show-action
      shape="round"
      autofocus
      @search="onSearch"
      @input="onInput"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <van-cell v-for="(item, index) in showList" :key="index" icon="search">
      <template #title>
        <span class="custom-title" v-html="item"></span> </template
    ></van-cell>
  </div>
</template>

<script>
import { getSuggestion } from "./home";
export default {
  name: "search",
  data() {
    return {
      value: "",
      SuggestionList: [],
    };
  },
  methods: {
    onSearch() {
      console.log(this.value);
    },
    async onInput() {
      if (this.value == "") {
        this.SuggestionList = [];
        return;
      }
      let res = await getSuggestion(this.value);
      console.log(res);

      this.SuggestionList = res.data.data.options;
    },
  },
  computed: {
    showList() {
      return this.SuggestionList.map((value) => {
        let reg = new RegExp(this.value, "ig");
        return value.replace(
          reg,
          (match) => `<span style="color:red">${match}</span>`
        );
      });
    },
  },
};
</script>

<style>
</style>